import React, { useState } from "react";
import { Entypo } from "@expo/vector-icons";
import { Text, TouchableOpacity, View, StyleSheet } from "react-native";

export default function Home({ navigation }) {

  return (
    <View style={styles.container}>
      <Text style={styles.headerText}>Sudoku</Text>
      <View style={styles.iconContainer}>
        <Entypo name="github" size={150} />
      </View>
      
      <View style={styles.buttonContainer}>
        <TouchableOpacity 
            style={styles.buttonWithIcon}
            onPress={() => navigation.navigate("Game_main",{ loadSavedGame: true})}
        >
          <Entypo name="pin" size={25} style={styles.icon} />
          <Text style={styles.buttonText}>继续游戏</Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.buttonWithIcon}
          onPress={() => navigation.navigate("Game_select")}
        >
          <Entypo name="controller-play" size={25} style={styles.icon} />
          <Text style={styles.buttonText}>开始游戏</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonWithIcon}
          onPress={() => navigation.navigate("Count")}
        >
          <Entypo name="bar-graph" size={25} style={styles.icon} />
          <Text style={styles.buttonText}>统计信息</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.buttonWithIcon}
          onPress={() => navigation.navigate("Setting")}
        >
          <Entypo name="cog" size={25} style={styles.icon} />
          <Text style={styles.buttonText}>设置</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center", 
    alignItems: "center", 
    padding: 20,
  },
  headerText: {
    fontSize: 40,
    fontWeight: "bold",
    color: "#333",
    marginBottom: 30,
    textAlign: "center",
  },
  iconContainer: {
    marginBottom: 40,
  },
  buttonContainer: {
    width: "100%",
    alignItems: "center",
  },
  buttonWithIcon: {
    flexDirection: "row", 
    alignItems: "center", 
    borderWidth: 2, 
    borderColor: "#000", 
    borderRadius: 8, 
    padding: 15, 
    marginVertical: 10, 
    justifyContent: "center",
    width: "80%", 
  },
  icon: {
    marginRight: 12, 
  },
  buttonText: {
    fontSize: 18,
    color: "#000",
    fontWeight: "bold",
  },
});
